
    <div class="container-fluid">
        <div class="row newlivejob">
            <div class="panel panel-primary">
                <div class="panel-heading system" data-i18n="newlivejob.New Live Job"></div>
                <div class="panel-body">
                    <div class="row form-group col-lg-12">
                        <div class="col-lg-4">
                            <label class="pull-right system"  data-i18n="newlivejob.Job Name"></label>
                        </div>
                        <div class="col-lg-7">
                            <input type="text" class="form-control" id="jobname">
                        </div>
                    </div>
                    <div class="row form-group col-lg-12">
                        <div class="col-lg-4">
                            <label class="pull-right system"  data-i18n="newlivejob.Source Type"></label>
                        </div>
                        <div class="col-lg-7">
                            <label class="radio-inline">
                                <input type="radio" id="sourcetype" name= "sourcetype" value="v4l2src"> v4l2src
                            </label>
                            <label class="radio-inline">
                                <input type="radio" id="sourcetype" name= "sourcetype" value="networksrc"> networksrc
                            </label>
                            <label class="radio-inline">
                                <input type="radio" id="sourcetype" name= "sourcetype" value="testsrc"> testsrc
                            </label>
                        </div>
                    </div>
                    <div class="row form-group col-lg-12" id="videocapturedevice" style="display: none;">
                        <div class="col-lg-4">
                            <label class="pull-right system" data-i18n="newlivejob.Video Capture Device"></label> 
                        </div>
                        <div class="col-lg-7">
                            <select class="form-control" id="videodevicelist">
                            </select>
                        </div>
                    </div>
                    <div class="row form-group col-lg-12" id="audiocapturedevice" style="display: none;">
                        <div class="col-lg-4">
                            <label class="pull-right system" data-i18n="newlivejob.Audio Capture Device"></label> 
                        </div>
                        <div class="col-lg-7">
                            <select class="form-control" id="audiodevicelist">
                            </select>
                        </div>
                    </div>
                    <div class="row form-group col-lg-12">
                        <div class="col-lg-4">
                            <label class="pull-right system"  data-i18n="newlivejob.Encoder Type"></label>
                        </div>
                        <div class="col-lg-7">
                            <label class="checkbox-inline">
                                <input type="checkbox" id="encodertype" value="phone"> <span data-i18n="newlivejob.Phone"></span>
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" id="encodertype" value="sdtv"> <span data-i18n="newlivejob.SDTV"></span>
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" id="encodertype" value="hdtv"> <span data-i18n="newlivejob.HDTV"></span>
                            </label>
                        </div>
                    </div>
                    <div class="row form-group col-lg-12">
                        <div class="col-lg-4">
                            <label class="pull-right system"  data-i18n="newlivejob.Output Type"></label>
                        </div>
                        <div class="col-lg-7">
                            <label class="checkbox-inline">
                                <input type="checkbox" id="encoderoutput" value="udp"> UDP
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" id="encoderoutput" value="m3u8"> M3U8
                            </label>
                        </div>
                    </div>
                    <button class='btn btn-primary pull-right' id='newlivejob' data-i18n="newlivejob.New Live Job"></button>
                </div>
            </div>
            <div id='job_editor_holder' style="display: none;"></div>
            <div id='encoder_editor_holder' style="display: none;"></div>
        </div>
    </div>


    <script type="text/javascript">

    $ (document).ready (function () {
        /* load configure */
        $.get("/admin/getconf", function (data) {
            if (data.result == "success") {
                Document.GstreamillConf.conf = data.data;
            } else {
                alert ("get configure failure: " + data.reason);
                return;
            }

            $("#newlivejob").click (function () {
                var sourcetype_value = $("#sourcetype:checked").val ();
                if (typeof sourcetype_value === "undefined") {
                    alert ("Select source type");
                    return;
                }

                $.getJSON ("/admin/schemas/" + sourcetype_value + ".json", function (job) {
                    var name_value = $("#jobname").val ();
                    if (name_value == "") {
                        alert ("Set name please");
                        return;
                    }
                    job.name = name_value;

                    if (job.type === "v4l2src") {
                        var alsadevice = $("#audiodevicelist").val ().replace(/\/dev\/snd\/pcmC(\d+)D(\d+)c/, "hw:$1,$2");
                        job.source.elements.alsasrc.property.device = alsadevice;
                        job.source.elements.v4l2src.property.device = $("#videodevicelist").val ();
                    }

                    var output = {'udp': false, 'm3u8': false};
                    var encoderoutputs = $('#encoderoutput:checked');
                    for (var i = 0; i < encoderoutputs.length; i++) {
                        output [encoderoutputs[i].value] = true;
                    }
                    if (!output['m3u8']) {
                        delete job.m3u8streaming;
                    }

                    var ischecked = {'phone': false, 'sdtv': false, 'hdtv': false};
                    var checked = $('#encodertype:checked');
                    for (var i = 0; i < checked.length; i++) {
                        ischecked [checked[i].value] = true;
                    }
                    var encoders = [];
                    for (var key in ischecked) {
                        if (ischecked[key]) {
                            $.ajax ({
                                type: "get",
                                url: "schemas/live_encoder_" + key + ".json",
                                dataType: "json",
                                async: false,
                                success: function (encoder) {
                                    encoders.push (encoder);
                                    if (!output['udp']) {
                                        delete encoder.udpstreaming;
                                    }
                                }
                            });
                        }
                    }
                    job.encoders = encoders;
                    $.post("putjob/" + name_value, JSON.stringify (job, null, 4), function (data) {
                        if (data.result == 'success') {
                            alert (data.result);
                            window.location.replace("joblist.html");
                        } else {
                            alert (data.result + '\n' + data.reason);
                        }
                    });
                });
            });

            $.get ("/admin/videodevices", function (devices) {
                for (var i = 0, device; device=devices[i]; i++) {
                    $("#videodevicelist").append ("<option>" + device + "</option>");
                }
            });

            $.get ("/admin/audiodevices", function (devices) {
                for (var i = 0, device; device=devices[i]; i++) {
                    $("#audiodevicelist").append ("<option>" + device + "</option>");
                }
            });

            $.i18n.init({
                lng: Document.GstreamillConf.language[Document.GstreamillConf.conf.language]
            }, function(t) {
                $(".nav").i18n ();
                $(".newlivejob").i18n ();
            });
        });

        $("input[name='sourcetype']:radio").change (function () {
            if ($("#sourcetype:checked").val () === "v4l2src") {
                $("#videocapturedevice").show ();
                $("#audiocapturedevice").show ();
            } else {
                $("#videocapturedevice").hide ();
                $("#audiocapturedevice").hide ();
            }
        });
    });

    </script>
